<template>
    <div v-wechat-title="$route.meta.title=arr.name">
			<div v-if="chenload">
				<div style="padding-bottom: 1.08rem;overflow: hidden;">
					<div style="background: #fff">
						<img :src="img+arr.thumb" alt="" class="img">
						<!--课程介绍-->
						<div class="intru">
							<div class="intruclass">
							 <div :class="arr.is_promotion == 1||arr.is_promotion == '1'?'m1':'m1name'">
								 <p class="introname">{{arr.name}}</p>
								 <p class="price">
									 <span>{{arr.sales}}人已加入</span>
									 <span v-if="arr.price==0" class="a1">免费</span>
									 <span v-else class="a">￥{{arr.price}}</span>
									 <!-- <span v-if="arr.price !=0">￥{{arr.xprice}}</span> -->
								 </p>
							 </div>
								<div class="dianhua" v-if="arr.is_promotion == 1||arr.is_promotion == '1'"  @click="tuiguang()">
										<img src="../../../src/assets/img/tui.png" alt="">
										<p>推广</p>
								</div>
							</div>
							<div v-if="arr.live_status!=3||arr.live_status!='3'" class="zbotime">
								<div v-if="arr.live_status==2||arr.live_status=='2'">
									<div class="time">
										<div class="timecolor">正在直播</div>
										<div class="timekai">{{arr.begin_time}}开播</div>
									</div>
								</div>
								<div v-else>
									<div class="time">
										<div>
											<span>距直播</span>
											<span class="timered" v-if="h!=0||h!='0'">{{h}}</span> <span v-if="h!=0||h!='0'">:</span>
											<span class="timered">{{m}}</span> :
											<span class="timered">{{s}}</span> :
											<span class="timered">{{t}}</span>
										</div>
										<div class="timekai">{{arr.begin_time}}开播</div>
									</div>
								</div>
							</div>
							<div v-else class="zbotime">
							  <div class="time">
								  <div style="color: #C2C9D3;">直播结束</div>
								  <div class="timekai">{{arr.begin_time}}开播</div>
							  </div>
							</div>
						</div>
             <!-- <div class="chenline-pay"></div> -->
						<!--带头像的-->
							<div class="d" @click="te()">
								<div class="msg">
									<img :src="img+arr.avatar" alt="">
									<div>
										<p>主讲人：{{arr.tname}}</p>
										<p>已被{{arr.follow}}人关注</p>
									</div>
								</div>
								<button class="btoGray" v-if="arr.teacher_collection==1||arr.teacher_collection=='1'" @click.stop="guan()">已关注</button>
								<button class="btoBlue" v-else @click.stop="guan()">关注</button>
							</div>
					</div>
          
					<div class="chenline-pay" v-if='arr.notice!=""'></div>
					<!--活动-->
					<van-notice-bar v-if='arr.notice!=""' class="huo1" :text="arr.notice" @click="huo1()"/>
					<div class="chenline-pay"></div>


					<!--v-html-->
					<div class="v">
						<span class="span1"></span>
						<span class="span2">课程简介</span>
						<div class="ht" v-html="arr.description">

						</div>
					</div>
					
					<div class="chenline-pay"></div>
					<!--底部-->
					<div>
						<div class="v" v-if="recommend.length!=0||recommend.length!='0'">
							<span class="span1"></span>
							<span class="span2">相关视频</span>
								<div class="ya" v-for="(item,index) in recommend" @click="recom(item)">
									<img :src="img+item.thumb" alt="" class="img2">
									<div>
										<p>{{item.name}}</p>
										<p class="p1">
											<img src="../../../src/assets/img/ren.png" alt="" class="img1" style=" width: 0.24rem;
				height: 0.2rem;
				vertical-align: baseline;">
											<span style="color: #C2C9D3;">{{item.sales}}人已加入</span>
											<span v-if="item.price==0" class="a1">免费</span>
											<span v-else class="a" >￥{{item.price}}</span>
											<span v-if="item.price !=0">￥{{item.xprice}}</span>
										</p>
									</div>
								</div>
							
							<!---->


						</div>
					</div>

					<div class="fix">
						<div @click="collect()" v-if="arr.live_collection==0||arr.live_collection=='0'">
							<img src="../../../src/assets/img/shouye/xing.png" alt="">
							<p style="color: #C2C9D3;">收藏</p>
						</div>
						<div @click="collect()" v-else>
							<img src="../../../src/assets/img/shouye/yellowstar.png" alt="">
							<p style="color: #666666;">已收藏</p>
						</div>
						
						
						<div v-if="arr.is_pay == 0||arr.is_pay == '0'">
							<div v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'"></div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<div @click="yaoqing()" v-if="arr.invite == 1||arr.invite == '1'">
										<img src="../../../src/assets/img/shouye/yaoqing.png" alt="">
										<p style="color: rgba(2,135,255,1);">邀请码</p>
									</div>
								</div>
								<div v-else>
									<div @click="zboend()" v-if="arr.invite == 1||arr.invite == '1'">
										<img src="../../../src/assets/img/flagcode.png" alt="">
										<p style="color: #C2C9D3;">邀请码</p>
									</div>
								</div>
							</div>
						</div>
						
						
						<div v-if="arr.is_pay == 0||arr.is_pay == '0'">
							<div v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'"></div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<div @click="look()" v-if="arr.trysee!=1||arr.trysee!='1'">
										<img src="../../../src/assets/img/shouye/blueyan.png" alt="">
										<p style="color: rgba(2,135,255,1);">免费试看</p>
									</div>
									<div @click="look()" v-else>
										<img src="../../../src/assets/img/orderkan.png" alt="">
										<p style="color: #C2C9D3;">已试看</p>
									</div>
								</div>
								<div v-else>
									<div @click="zboend()">
										<img src="../../../src/assets/img/orderkan.png" alt="">
										<p style="color: #C2C9D3;">免费试看</p>
									</div>
								</div>
							</div>
						</div>
						
						<div v-if="arr.is_vip==1||arr.is_vip=='1'">
							<div v-if="arr.live_status!=3||arr.live_status!='3'">
								<button @click="btn()">超级VIP免费观看</button>
							</div>
							<div v-else>
								<button @click="zboend()" style="background: #C2C9D3;color: #fff;">直播结束</button>
							</div>
						</div>
						<div v-else>
							<div v-if="arr.is_pay == 1||arr.is_pay == '1'">
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										免费观看
									</button>
									<button @click="btn()" v-else>立即观看</button>
								</div>
								<div v-else>
									<button @click="zboend()" style="background: #C2C9D3;color: #fff;">直播结束</button>
								</div>
							</div>
							<div v-else>
								<div v-if="arr.live_status!=3||arr.live_status!='3'">
									<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										免费观看
									</button>
									<button @click="btn()" v-else>￥{{arr.price}}支付观看</button>
								</div>
								<div v-else>
									<button @click="zboend()" style="background: #C2C9D3;color: #fff;" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
										直播结束
									</button>
									<button @click="btn()" v-else>￥{{arr.price}}支付观看</button>
								</div>
							</div>
						</div>
					</div>
				</div>



				<!--推广-->
				<mt-popup v-model="popupVisible3" popup-transition="popup-fade" position="bottom" style="width: 100%;height: 100%;background:rgba(0,0,0,.1);">
					<div style="position: relative;top: 15%;">
						<div style="width: 92%;height: 7.93rem;background: #fff;text-align: center;margin: auto;overflow: hidden;border-radius: 0.08rem">
							<p style="margin-top: 0.94rem">
								<img src="../../../src/assets/img/timg.jpg" alt="" style="width: 3.84rem;height: 3.84rem;">
							</p>
							<section class="form">
								<p class="url">{{url}}</p>
								<button v-clipboard:copy="url"
												v-clipboard:success="onCopy"
												v-clipboard:error="onError" class="fuzhi">
									点击复制链接
								</button>
							</section>
						</div>
					</div>
					<div style="text-align: center;margin-top: 2.3rem">
						<img src="../../../src/assets/img/cha1.png" alt="" style="width: 0.66rem;" @click="un2()">
					</div>
				</mt-popup>


				<!--小七咨询-->
				<div class="shoewr-chen-popu">
					<div class='chen-conactive'>
						<div class="chen-contener-popu">
							<div class="chen-con-pic">
								<img :src="img+serviceinfo.qr_code" alt="">
							</div>
							<a class="chen-phone" @click="phoneclick(serviceinfo.tel)">
								<div class="chen-phone-pic">
									<img src="../../../src/assets/img/kechengxiangqing/zixun.png" alt="">
								</div>
								<span class="chen-tel">{{serviceinfo.tel}}</span>
							</a>
							<p class="chen-sever">
								客服随时为您提供服务</br>
								点击电话即刻咨询<span style="color: #FE9C2B;">(微信同号)</span></p>
						</div>
						<div class="close-chen">
							<img src="../../../src/assets/img/cha1.png" alt="" @click="un1()">
						</div>
					</div>
				</div>


				<!--课程公告-->
				<div class="shoewr-chenhou">
					<div class="chen-contener">
						<p class="chen-title">课程公告</p>
						<p class="chen-text">{{arr.notice}}</p>
						<p class="chen-button" @click="huo2()">确定</p>
					</div>
				</div>
				
				<!-- 邀请码 -->
				<div class="shoewr-free">
					<div class="chen-free">
						<p class="freetitle">请输入邀请码</p>
						<input type="number"oninput="if(value.length>4)value=value.slice(0,4)" v-model="freevalue" placeholder="请输入邀请码">
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclosefree()">取消</p>
							<p class="chen-but-yes" @click="repeatclickfree()">确认</p>
						</div>
					</div>
				</div>
				
				<!-- 登录弹窗 -->
				<div class="shoewr-chenhoupass">
					<div class="chen-contener chenpass">
						<p class="chen-title">提示</p>
						<p class="chen-text chen-textactive">您需要先登录?</p>
						<div class="chen-but">
							<p class="chen-but-no" @click="repeatclose()">取消</p>
							<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
						</div>
					</div>
				</div>

				<!--回到首页-->
					<img src="../../../src/assets/img/goback.png" alt=""   class="goback" @click="goback()" v-if="fix">
				<!--推广图标-->
					<img src="../../../src/assets/img/detailkefu.png" alt=""  class="tuiguang" @click="dianhua()" v-if="fix">
					<!-- 您已试看过该课程 -->
					<div class="shoewr-chenshi">
						<div class="chen-contener chen-textactiveshi">
							<p class="chen-title">提示</p>
							<p class="chen-text chen-textshi">您已试看过该课程</p>
							<p class="chen-button-shiyes" @click="shishare()">确定</p>
						</div>
					</div>
			</div>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
    export default {
        name: "Kx",
      data(){
          return{
			chenload:false,
			freevalue:'',
			phoneurl:this.$store.state.phoneurl,
			id:'',  //课程id
            // popupVisible:false,
            popupVisible1:false,
            popupVisible3:false,
            img:this.$store.state.img,
            arr:[],
            t:'',
            h:'',
            m:'',
            s:'',
            recommend:[],
            num:'',
            code:'',
            url:'https://www.csdn.net/gather_22/MtTaAg2sODk2Mi1ibG9n.html',
            top:'',
            fix:true,
			codeclick:0,
			serviceinfo:'',
			tid:'',
          }
      },
      methods:{
		  // 直播结束
		zboend(){
			 layer.open({
				content: '直播已结束，回放正在上传中，请耐心等待~',
				skin: 'msg',
				time: 2 //1秒后自动关闭
			 }); 
		},
		// 点击拨打电话
		phoneclick(tel){
			window.location.href = 'tel://'+tel+''
		},
		repeatclosefree(){
			$('.shoewr-free').fadeOut();
		},
		shishare(){
			$('.shoewr-chenshi').fadeOut();
		},
		nologin(){
			$('.shoewr-chenhoupass').fadeIn();
		},
		// 点击取消
		repeatclose(){
			$('.shoewr-chenhoupass').fadeOut();
		},
		// 点击去登录
		repeatclick(){
			$('.shoewr-chenhoupass').fadeOut();
			this.d();
		},
		huo1(){
			$('.shoewr-chenhou').fadeIn();
		},
		huo2(){
			$('.shoewr-chenhou').fadeOut();
		},
		dianhua(){
			$('.shoewr-chen-popu').fadeIn();
		},

		un1(){
			$('.shoewr-chen-popu').fadeOut();
		},
		un2(){
			this.popupVisible3 = false;
		},
		onCopy () {
			this.popupVisible3 = false;
			this.$toast({
				message:'复制成功',
			});
			// this.snackBar.info(this.$t('prompt.copySuccess'))
		},
		onError () {
			// this.$message.error(this.$t('prompt.copyFail'))
		},
		tuiguang(){
			this.popupVisible3 = true;
		},
		// 点击进入教师详情
		te(){
			this.$router.push({
				path:'/steach',
				query:{
					id:this.arr.teacher_id
				}
			})
		},
				// 回到首页
        goback(){
          this.$router.push({
            path:'/'
          })
        },
		// 点击确认
		repeatclickfree(){
			var that = this;
			if(that.freevalue==''){
				layer.open({
					content: '请输入邀请码',
					skin: 'msg',
					time: 2 //1秒后自动关闭
				});
			}else{
				 var data={
					 id:this.id,
					 code:that.freevalue
				 }
				 that.axios.post(that.$store.state.url + 'LiveCourse/checkCode',data).then(res=> {
					 if(res.data.errcode==0||res.data.errcode=='0'){
						layer.open({
							content: '邀请码正确',
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
						if(that.codeclick==0||that.codeclick=='0'){
							that.codeclick=1;
								setTimeout(function(){
									if (that.arr.type == 2||that.arr.type == '2'){
										 that.$router.push({
											 path:'/demand',
											 query:{
												 id:that.arr.id,
												 cid:'',
												 y:that.freevalue,
												 type:1,   //课程
												 zid:that.tid,
												 zbo:0,
												 url:that.$route.fullPath
											 }
										 })
									 } else {
										 that.$router.push({
											 path:'/demand',
											 query:{
												 id:that.arr.id,
												 cid:'',
												 y:that.freevalue,
												 type:1,   //课程
												 zid:that.tid,
												 zbo:1,
												 url:that.$route.fullPath
											 }
										 })
									}
								},500)
						}
					}else{
						layer.open({
							content: res.data.msg,
							skin: 'msg',
							time: 2 //1秒后自动关闭
						});
					}
				 })
			}
		},
				// 邀请码
         yaoqing(){
           if (localStorage.getItem('token')){
             $('.shoewr-free').fadeIn();
           } else {
             this.nologin();
           }
         },
		 nologin(){
			$('.shoewr-chenhoupass').fadeIn();
		 },
		 // 点击取消
		 repeatclose(){
			$('.shoewr-chenhoupass').fadeOut();
		 },
		 // 点击去登录
		 repeatclick(){
			$('.shoewr-chenhoupass').fadeOut();
			this.d();
		 },
        look(){
          if (localStorage.getItem('token')){
            if (this.arr.trysee == 0||this.arr.trysee == '0'){
            	// this.popupVisible4 = true;
            	//    获取课程详情
			  this.axios.get(this.$store.state.url + 'LiveCourse/addTry',{
				params:{
				  id:this.$route.query.id
				},
			  }).then(res=>{
					// console.log(res);
					var errcode = res.data.errcode;
					if(errcode==0||errcode=='0'){
						this.tapzbo(1);
					}else{
						this.$toast({
						  message:res.data.msg,
						});
					}
					
				})
            }else if(this.arr.trysee == 10||this.arr.trysee == '10'){
            	this.tapzbo(1);
            }else {
              $('.shoewr-chenshi').fadeIn();
            }

            } else {
              this.nologin();
            }
        },
//         close(){
//           this.popupVisible = false;
//         },
        time(){
          var that = this;
          var h,m,s,t;
          var leftTime = this.arr.countdown;
          var timer = setInterval(function () {
            leftTime--;

            if (leftTime>=0){
              h = Math.floor(leftTime/60/60/24);
              m = Math.floor(leftTime/60/60) - h*24;
              s = Math.floor(leftTime/60 - h*24*60 - m*60);
              t = Math.floor(leftTime - s*60 - m*60*60 - h*24*60*60)
              // console.log(h,m,s)
              this.h = h;
              this.m = m;
              this.s = s;
              this.t = t;
			  this.chenload=true;
							// console.log(this.h==0)
            }else {
              clearInterval(timer);
              this.t = 0;
              this.h = 0;
              this.m = 0;
              this.s = 0;
			  this.chenload=true;
            }
          }.bind(this),1000)
        },
				// 关注讲师
        guan(){
          var b =localStorage.getItem('token');
          // console.log(this.$route.query.id)
          if(b){
          	var that = this;
          	// console.log(b)
          	 that.axios.get(this.$store.state.url +'find/teacherColl',{
          		 params:{
          			 id:this.arr.teacher_id
          		 }
          	 }).then(res=>{
          		 // console.log(res.data)
          		 if(res.data.errcode==0||res.data.errcode=='0'){
                var teacher_collection = this.arr.teacher_collection;
          			if(teacher_collection==0||teacher_collection=='0'){
          				that.$toast({
          				  message:'关注成功',
          				  position:'bottom'
          				});
						this.arr.follow = this.arr.follow +1;
          				this.arr.teacher_collection = 1
          			}else{
          				that.$toast({
          				  message:'已取消关注',
          				  position:'bottom'
          				});
						this.arr.follow = this.arr.follow -1;
          				this.arr.teacher_collection = 0
          			}
          			// this.xq();
          		 }else{
          			 that.$toast({
          			   message:res.data.msg,
          			   position:'bottom'
          			 });
          		 }
          	 })
          }else{
          	this.nologin();
          }

        },
				// 收藏
        collect(){
            var a=localStorage.getItem('token') 
			if(a){
				this.axios.get(this.$store.state.url +'LiveCourse/collect',{
					params:{id:this.id}
				}).then(res=>{
				if(res.data.errcode==0||res.data.errcode=='0'){
					//  console.log(res.data.msg)  
					var collect = this.arr.live_collection;
					 if(collect==0||collect=='0'){
							this.$toast({
								 message:'收藏成功',
								 position:'bottom'
							})
							this.arr.live_collection = 1;
					 }else{
						 this.$toast({
							 message:'已取消收藏',
							 position:'bottom'
						 })
						 this.arr.live_collection = 0;
						}
						// this.courseall();
					}else if(res.data.errcode==1002){
								 this.d()   
					}else{
						 this.$toast({
						 message:res.data.msg,
						 position:'bottom'
						 })
					}
				
			})
			}else{
				this.nologin()  
			}
         
        },
		btn(){
		  if (localStorage.getItem('token')){
			if (this.arr.is_pay == 1 || this.arr.is_pay == '1' || this.arr.price == 0.00 || this.arr.price == '0.00' || this.arr.price == 0 || this.arr.price == '0'){
		
			  this.tapzbo(0);
			}else {
			  this.axios.get(this.$store.state.url +'Pay/courseOrder',{
				 params:{
					 id:this.arr.id
				 }
			  }).then(res=>{
				if(res.data.errcode==0||res.data.errcode=='0'){
					var data = res.data.data;
					var order_id = data.id;
					this.$router.push({
					  path:'/order',
					  query:{
						id:this.arr.id,
							order_id:order_id,
							type:4,
							pay:0,
					  }
					})
				}
			  })
			}
		  } else {
			  if(this.arr.price == 0.00 || this.arr.price == '0.00' || this.arr.price == 0 || this.arr.price == '0'){
				  this.tapzbo(0);
			  }else{
				this.nologin();  
			  }
			 
		  }
		},
		tapzbo(try1){
			// console.log(898)
			if (this.arr.type == 2||this.arr.type == '2'){
				this.$router.push({
					path:'/demand',
					query:{
						id:this.arr.id,
						y:'',
						type:1,   //课程
						try:try1,
						zbo:0,
						cid:'',
						zid:this.tid,
						url:this.$route.fullPath
					}
				})
			} else {
				this.$router.push({
					path:'/demand',
					query:{
						id:this.arr.id,
						y:'',
						type:1,   //课程
						try:try1,
						cid:'',
						zbo:1,
						zid:this.tid,
						url:this.$route.fullPath
					}
				})

			}
		},
        recom(item){
          this.$router.push({
            path:'/gkx',
            query:{
              id:item.id
            }
          })
        },
        
       
        gun(){
          var  scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.top = scrollTop;
        },
		// 课程详情
		courseall(){
			this.axios.get(this.$store.state.url + "LiveCourse/course",{
				 params:{
					id:this.id
				 },
			}).then(res=>{
			  // console.log(res.data)
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				this.arr = res.data.data
				$('title').html(this.arr.name);
				// console.log(this.arr.remain_time);
				this.time();
				var link = this.$store.state.linkurltap +'/kx?id='+ this.id;
				var url = this.$store.state.linkurltap;
				var obj = {
					 title: this.arr.name,		//分享标题
					 desc: this.$store.state.desc,	//分享内容
					 linkurl: link,//分享链接
					 img: this.$store.state.img+this.arr.thumb,
				}
				this.sdk.getJSSDK(url,obj,this.$store.state.url);
				// this.chenload=true;
			  }else {
				// this.$toast({
				//   message:res.data.msg,
				// });
			  }
			})
		}
      },
      mounted(){
		$('title').html('');
		this.loginsuccess();
		var id = this.$route.query.id;
		this.id=id;
				// var headers = this.$store.state.headers;
        // this.i();
				
        var a = sessionStorage.getItem('numbers');

        if (!localStorage.getItem('token')){
          // this.popupVisible = true;
          if (!sessionStorage.getItem('numbers')) {
            sessionStorage.setItem('numbers',1)
          }else if (sessionStorage.getItem('numbers')){
            a++;
            sessionStorage.setItem('numbers',a);
          }
        } else {
          sessionStorage.removeItem('numbers');
        }
		
		if(this.$route.query.zid){
			this.tid = this.$route.query.zid;
		}else{
			this.tid = '';
		}

        if (a>=3){
          this.nologin();
        }
        
         //获取课程详情
		this.courseall();
       

			 
			 //获取相关视频
        this.axios.get(this.$store.state.url + "LiveCourse/relatedCourse",{
					params:{
						id:id
					},
				}).then(res=>{
          // console.log(res.data)
          if (res.data.errcode == 0){
            this.recommend = res.data.data
          }
        })
				
		//获取咨询详情
		this.axios.get(this.$store.state.url + 'find/service_info').then(res=>{
		  // console.log(res.data)
		 if (res.data.errcode == 0||res.data.errcode == '0'){
		   this.serviceinfo = res.data.data
		  }
		})
				
				

        

        //监听上滚动，下滚动

        window.addEventListener('scroll', this.gun)

      },
      watch:{
        top(newName, oldName){
          if (newName > oldName){
            this.fix = false;
          } else {
            this.fix = true;
          }
        }
      }
    }
</script>

<style scoped>
  .goback{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
    text-align: center;
  }
    .img{
      width: 100%;
    }
  .intru{
    width:92%;
    margin: auto;
    /*height: 1.94rem;*/
    padding-bottom: 0.2rem;
    overflow: hidden;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    display: flex;
		/* justify-content: space-between; */
    flex-wrap: wrap;
    align-items: center;
  }
	.intruclass{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.m1{
	  width: 83%;
		padding-right: .3rem;
	}
	.m1name{
	  width: 100%;
	}
	.dianhua{
		border-left: 1px solid #EDEDED;
		padding-left: .3rem;
	}
	
	.dianhua img{
		width: .34rem;
		height: .46rem;
	}
  .intru .introname{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
  }
  /* .time{
	  display: flex;
	  justify-content: space-between;
  } */
  .price{
    margin-top: 0.2rem;
  }
  .price span{
    /*font-size: 0.24rem;*/

    line-height: 0.22rem;
  }
  .price span:nth-child(1){
    color: #C2C9D3;
  }
  .price span:nth-child(3){
    text-decoration:line-through;
    float: right;
    color: #C2C9D3;
    margin-right: 0.2rem;
  }
    .a{
      font-size: 0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      float: right;
    }
    .a1{
      font-size: 0.3rem;
      font-weight:bold;
      color:#0287FF;
      float: right;
    }
	.zbotime{
		width: 100%;
	}
    .time{
      width: 100%;
      color: #FF0214;
      margin-top: 0.3rem;
	  display: flex;
	  justify-content: space-between;
    }
  .time span:nth-child(1){
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    /* margin-right: 0.16rem; */
  }
  .timered{
    display: inline-block;
    padding: 0 0.1rem 0 0.1rem;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #fff;
    background-color: #FF0214;
    text-align: center;
    border-radius:0.1rem;
	font-size: .24rem;
  }
	.timecolor{
		color:#FF0214 !important;
		font-weight: 600;
	}
  .time .timekai{
    font-size:0.24rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
	text-align: right;
    /* float: right; */
  }
  .d{
    width: 100%;
    height: 1.2rem;
  }
  .msg{
    height: 0.8rem;
    float: left;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
  }
  .msg img{
    width: 0.8rem;
    height: 100%;
    border-radius: 50%;
    float: left;
  }

  .msg div{
    margin-left: 1rem;
    font-size: 0.28rem;
    line-height:0.32rem;
  }
  .msg div p:nth-child(2){
    margin-top: 0.1rem;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
  }
    .btoBlue{
      width:1rem;
      height:0.44rem;
      background:rgba(2,135,255,1);
      border-radius:0.22rem;
      color: #fff;
      font-size:0.24rem;
      border: none;
      float: right;
      margin-top: 0.4rem;
      margin-right: 0.3rem;
    }
    .btoGray{
      width:1rem;
      height:0.44rem;
      background:rgba(240,240,240,1);
      border-radius:0.22rem;
      color: #999999;
      font-size:0.24rem;
      border: none;
      float: right;
      margin-top: 0.4rem;
      margin-right: 0.3rem;
    }
  .v{
    width: 100%;
    margin-top: 0.2rem;
    background: #fff;
    box-sizing:border-box;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
	overflow: hidden;
  }
  .span1{
    display: inline-block;
    width:0.04rem;
    height:0.28rem;
    background:rgba(2,135,255,1);
    /*vertical-align: middle;*/
  }
  .span2{
    margin-left: 0.1rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    vertical-align: top;
  }
  .ht{
    margin-top: 0.3rem;
  }
  .ht>>>img{
   width: 100%!important;
  }
  .ht>>>table{
      display: block;
      width: 100%!important;
    }
  .ht>>>span{
      white-space: normal!important;
    }
    .ya{
      height: 1.18rem;
      margin-top: 0.3rem;
      position: relative;
    }
    .img2{
      width: 2.1rem;
      height: 100%;
      float: left;
      border-radius:0.08rem;
    }
    .ya div{
      height: 100%;
      margin-left: 2.3rem;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    .ya div p:nth-child(1){
      width: 4.6rem;
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      line-height:0.32rem;
    }
    .img1{
      width: 0.3rem;
      height: 0.3rem;
    }
    .p1{
      width: 100%;
    }
    .p1 span{
      /*font-size:0.24rem;*/
      /*color:rgba(194,201,211,1);*/
      line-height:0.32rem;
    }
    .p1 span:nth-child(4){
      font-size:0.24rem;
      color:rgba(194,201,211,1);
      text-decoration:line-through;
      line-height:0.32rem;
      float: right;
      margin-right: 0.2rem;
    }
    /*.p1 span:nth-child(3){*/
      /*font-size:0.3rem;*/
      /*font-weight:bold;*/
      /*color:rgba(255,2,20,1);*/
      /*line-height:0.32rem;*/
      /*float: right;*/
    /*}*/
  .fix{
    width: 7.5rem;
    height: 0.88rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
		z-index: 99;
  }
  .fix img{
    width: 0.4rem;
    height: 0.4rem;
  }
  .fix div{
    text-align: center;
  }
  .fix button{
    border: none;
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }
  .pop{
    width: 92%;
    height: 6.22rem;
    margin: auto;
    background:rgba(255,255,255,1);
    margin-top: 1.7rem;
    overflow: hidden
  }
  .popImg{
    width: 0.66rem;
    margin-top: 0.5rem;
  }
  .verify{
    font-size:0.36rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    text-align: center;
    margin-top: 0.8rem;
  }
  /*tanchuang*/


    .tel{
      width: 100%;
      border-bottom: 0.02rem solid rgba(237,237,237,1);
      display: flex;
      align-items: center;

    }
    .tel_img{
      width: 0.38rem;
      height: 0.44rem;
    }
    .tel_img img{
      width: 100%;
      height: 100%;
    }
    .tel_input{
      width: 60%;
      height: 0.8rem;
      margin-left: 0.2rem;
    }
    .tel_input input::placeholder{
      font-size: 0.3rem;
      line-height: 0.5rem;
    }
    .tel_input input{
      height: 100%;
      border: none;
      outline: none;
    }
    .tel button{
      width:2.4rem;
      height:0.76rem;
      background:rgba(255,255,255,1);
      border:0.02rem solid rgba(2,135,255,1);
      border-radius:0.38rem;
      margin-bottom: 0.1rem;
      color: rgba(2,135,255,1);
      font-size: 0.3rem;
    }
  .last{
    width: 100%;
    height:0.88rem;
    background:linear-gradient(90deg,rgba(2,135,255,1),rgba(2,157,255,1));
    box-shadow:0 0 0.1rem 0 rgba(2,109,255,0.6);
    border-radius:0.44rem;
    font-size:0.36rem;
    color:rgba(255,255,255,1);
    line-height:0.46rem;
    margin-top: 0.8rem;
    border: none;
    outline: none;
  }
  .tuiguang{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom:2.7rem;
  }
  .url{
    width: 6.5rem;
    height: 0.5rem;
    margin:0.5rem auto 0;
    border-radius:0.24rem;
    background:rgba(247,247,247,1);
    padding: 0.1rem 0.27rem 0.1rem 0.27rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .fuzhi{
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.5rem;
    outline: none;
    border: none;
    color: #fff;
  }
  .top3{
    height: 100%;
    margin-left: 0.6rem;
    /*margin-bottom: 0.2rem;*/
    /*margin-top: 0.15rem;*/
  }
  .top3 img{
    width: 0.53rem;
    height: 0.53rem;
  }
  .top3 p{
    font-size:0.2rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
  .huo1{
    width: 100%;
    height: 0.5rem;
    background:rgba(252,229,211,1);
    margin-top: 0.2rem;
    color:rgba(226,47,58,1);
  }
  /*.huo1 p{*/
    /*width: 92%;*/
    /*height: 0.5rem;*/
    /*line-height: 0.5rem;*/
    /*margin: auto;*/
    /*font-size:0.24rem;*/
    /*color:rgba(226,47,58,1);*/
    /*overflow: hidden;*/
    /*text-overflow:ellipsis;*/
    /*white-space: nowrap;*/
  /*}*/
</style>
